<template>
<div>
  <div class="box box-custom">
    <div class="box-header with-border">
       <h3 class="box-title">分类管理</h3>
       <button type="button" class="btn btn-custom pull-right" v-on:click="showAdd()">添加分类</button>
    </div>
    <div class="box-body custom-tree-container">
        <el-tree
          node-key="id"
          accordion
          highlight-current
          :indent="8"
          :expand-on-click-node="false"
          :data="categoryTree">
          <span class="custom-tree-node" slot-scope="{ node, data }">
            <span class="table_td">分类名称：{{ data.name }}</span>
            <span class="table_td">题库类别：{{ (data.typeId ? $store.getters.getDictionary.productType[data.typeId] : '') }}</span>
            <span>
              <el-button
                type="text"
                size="mini"
                @click="() => showEdit(node, data)">
                <i class="el-icon-edit"></i>编辑
              </el-button>
              <el-button
                type="text"
                size="mini"
                @click="() => delCategory(node, data)">
                <span class="danger"><i class="el-icon-delete"></i>删除</span>
              </el-button>
            </span>
          </span>
        </el-tree>
    </div>
  </div>  
  <el-dialog width="60%"
  :title="dialogTitle"
  :visible.sync="dialogVisible"
  :before-close="handleClose">
    <form class="form-horizontal">
      <div class="form-group">
        <label class="col-sm-2 control-label">分类名称</label>
        <div class="col-sm-10">
          <input class="form-control" v-model="formData.name" placeholder="请输入分类名称"></input>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">题库类别</label>
        <div class="col-sm-10">
          <select class="form-control" v-model="formData.typeId">
            <option value=""></option>
            <option v-for="(item, key) in $store.getters.getDictionary.productType" :value="key">{{item}}</option>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">上级分类</label>
        <div class="col-sm-10">
          <select class="form-control" placeholder="请选择上级分类" v-model="formData.parentId">
            <optgroup label="创建一级分类">
              <option value='0'>无</option>
            </optgroup>
            <optgroup label="创建二级分类">
              <option v-for="item in primaryCategory" :value="item.id">{{item.name}}</option>
            </optgroup>
          </select>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">分类描述</label>
        <div class="col-sm-10">
          <textarea class="form-control" rows="3" v-model="formData.description"></textarea>
        </div>
      </div>
      <div class="form-group">
        <label class="col-sm-2 control-label">禁用</label>
        <div class="col-sm-10">
          <div class="checkbox form-control">
            <label>
              <input type="checkbox" v-model="formData.disabled" />
            </label>
          </div>
        </div>
      </div>
      <div class="textCenter">
        <button type="button" class="btn btn-custom" v-on:click="onSubmit()">保存</button>
      </div>
    </form>
  </el-dialog>
</div>
</template>
<script>
export default {
  name: 'questionCategory',
  data () {
    return {
      primaryCategory: [],
      categoryTree: [],
      categoryList: [],
      dialogVisible: false,
      dialogTitle: '',
      formData: {}
    }
  },
  props: {
  },
  components: {
  },
  methods: {
    getPrimaryCategory () {
      let parentId = 0
      this.$http.get('question/getCategory?parentId=0').then(
        response => { 
          this.primaryCategory = response.data.data
        }
      )
    },
    getCategoryList () {
      this.$http.get('question/listCategory').then(
        response => {
          this.categoryTree = response.data.data
        }
      )
    },
    addCategory () {
      this.$http.post('question/saveCategory', this.formData).then(
        response => {
          this.getPrimaryCategory()
          this.getCategoryList()
          alert(response.data.message)
          this.dialogVisible = false
        }
      )
    },
    updataCategory () {
    },
    onSubmit () {
      // this.formData.id ? this.updataCategory : this.addCategory()
      this.addCategory()
    },
    delCategory (node, data) {
      if (confirm('确认删除？') === false ) return false
      let id = data.id
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(d => d.id === data.id);
      this.$http.delete('question/deleteCategory?id=' + id).then(
        response => {
          alert(response.data.message)
          children.splice(index, 1)
          this.getPrimaryCategory()
        }
      )
    },
    handleClose (done) {
      this.$confirm('确认关闭？').then(_ => { done() }).catch(_ => {})
    },
    showAdd () {
      if (this.primaryCategory.length <= 0) {
        this.getPrimaryCategory()
      }
      this.dialogTitle = '添加分类'
      this.formData = {}
      this.dialogVisible = true
    },
    showEdit (node, data) {
      if (this.primaryCategory.length <= 0) {
        this.getPrimaryCategory()
      }
      this.dialogTitle = '修改分类'
      this.formData.id = data.id
      this.formData.parentId = data.parentId // node.parent.data.id || '0'
      this.formData.name = data.name
      this.formData.typeId = data.typeId
      this.formData.description = data.description
      this.formData.disabled = (data.disabled ?  true : false)
      // ((data.disabled == '1' || data.disabled === true)? true : false)
      this.dialogVisible = true
    }
  },
  watch: {
    // 监听参数变化
    options: {
      handler: function(val) {
        this.options = val;
        this.renderCharts();
      },
      // 深度观察
      deep: true
    }
  },
  beforeCreate () {},
  created () {},
  beforeMount () {},
  mounted () {
    // this.getPrimaryCategory()
    this.getCategoryList()
  },
  beforeUpdate () {},
  updated () {},
  beforeDestroy () {},
  destroyed () {}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.custom-tree-node .table_td{display: inline-block; min-width:280px;}
</style>
